<template>
	<view class="container bg-fff" v-if="!$u.test.isEmpty(dataInfo)">
		<view class="title">{{dataInfo.title}}</view>
		<!-- <view class="user flex-align-center"> -->
			<!-- <view class="original flex-center">原创</view> -->
			<!-- <view>{{dataInfo.user_info.nickname}}</view> -->
		<!-- </view> -->
		<view class="time">{{dataInfo.created_at}} <!-- 发布于{{dataInfo.city}} --></view>
		<view class="parse">
			<u-parse :html="dataInfo.content" :tag-style="style"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				dataInfo: {},
				style: {
					video: 'width: 100%;'
				},
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getHttp();
		},
		methods: {
			getArticleInfo() {
				uni.$u.api.getArticleInfo(this.id).then(res => {
					this.dataInfo = res;
				})
			},
			getHttp() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				
				this.getArticleInfo();

				setTimeout(() => {
					uni.hideLoading();
				}, 800)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.user {
			margin-top: 44rpx;
			font-size: 20rpx;
			color: #999999;
			
			.original {
				width: 54rpx;
				height: 32rpx;
				background: #D8D8D8;
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #666666;
				margin-right: 26rpx;
			}
		}
		
		.time {
			margin-top: 24rpx;
			font-size: 20rpx;
			color: #999999;
		}
		
		.parse {
			margin-top: 30rpx;
		}
	}
</style>
